<template>
    <el-autocomplete 
    ref="search"
    v-model="searchText"
    size="mini" 
    class="search-input" 
    clearable
    :placeholder="data.title"
    :trigger-on-focus="false"
    :fetch-suggestions="querySearchAsync"
    popper-class="home-nav-search-res-popper"
    :popper-append-to-body="false"
    @blur="blurHandler"
    @clear="hideSearch"
    @click.native.stop
    >
        <template v-slot="{item}">
            <div class="search-res-item">
                <div
                class="left"
                @click="searchResSelHandler(item)"
                >
                    <div class="icon">
                        <img 
                            :src="item.imgurl"
                            :alt="item.name"
                        />
                    </div>

                    <div class="title">
                        <div class="text">
                            {{item.name}}
                        </div>

                        <div class="desc">
                            {{item.describe}}
                        </div>
                    </div>
                </div>

                <div class="right">
                    <div class="btn btn-add">
                        <el-tooltip effect="light" content="添加到我的桌面" placement="top-end">
                            <i 
                                class="el-icon-circle-plus btn-add"
                                @click.stop="addHandler(item)"
                            ></i>
                        </el-tooltip>
                    </div>
                </div>
            </div>
        </template>
    </el-autocomplete>
</template>

<script>
import { mapActions } from 'vuex';

export default {
    props: {
        
        data: {
            type: Object,
            default: () => ({
                // title 名称
                // imgurl 图标
                // imgurl1 激活状态下图标
                // expand 展开
                // search 使用搜索
                // children: [
                //     {
                //         title 名称
                //         imgurl tubiao 
                //         link 链接地址
                //         content: [
                //             name 名称
                //             describe 描述
                //             linkurl 链接地址
                //             imgurl 图片
                //         ]
                //     }
                // ]
            }),
        },
    },
    data() {
        return {
            searchText: '',
        };
    },
    methods: {
        ...mapActions({
            showLogin: 'global-dialog/showLogin',
        }),
        checkIsLogin() {
            const SERIAL_CODE = this.$cookies.get('SERIAL_CODE');

            if (!SERIAL_CODE) {
                this.showLogin();

                return false;
            }

            return true;
        },
        blurHandler() {
            if (this.searchText) {
                // 有值的话，不隐藏
                return;
            }

            this.hideSearch();
        },
        hideSearch() {
            setTimeout(() => {
                this.$emit('close');
                this.searchText = '';
            }, 100);
        },
        querySearchAsync(str, cb) {
            if (!str) {
                return cb([]);
            }

            var reg = new RegExp(str, 'i'),
                res = [],
                {children} = this.data;
            
            children.forEach(child => {
                child.content.forEach(item => {
                    if (
                        reg.test(item.name)
                        || reg.test(item.describe)
                    ) {
                        res.push(item);
                    }
                });
            });

            cb(res);
        },
        searchResSelHandler(item) {
            var {linkurl} = item;

            if (!linkurl) {
                return;
            }

            window.open(linkurl);

            this.hideSearch();
        },
        addHandler(item) {
            if (!this.checkIsLogin()) {
                return;
            }

            this.$post(`${this.$store.state.api.webUrl}/index/adddesk.json`, {
                guid: item.guid,
            }, data => {
                this.$emit('update');

                showMsg('添加成功', 'success');
            });
        },
    },
    mounted() {
        this.$refs.search.focus();
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
    .search-res-item{
        display: flex;
        margin: 4px 0;

        .left{
            display: flex;
            flex: 1;
            overflow: hidden;
            height: 100%;

            .icon{
                display: flex;
                align-items: center;
                margin-right: 10px;

                img{
                    display: block;
                    width: 16px;
                    height: 16px;
                }
            }

            .title{
                display: flex;
                flex: 1;
                flex-direction: column;
                justify-content: center;
                overflow: hidden;
                font-size: 14px;
                color: #2d2d2d;
                font-weight: bold;

                .text{
                    max-width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    line-height: 1em;
                }

                .desc{
                    max-width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 12px;
                    color: #C0C4CC;
                    line-height: 1em;
                }
            }
        }

        .right{
            display: none;

            .btn{
                display: flex;
                align-items: center;
                font-size: 16px;
                cursor: pointer;

                & + .btn{
                    margin-left: 6px;
                }
            }

            .btn-add{
                color: $successColor;
            }

            .btn-remove{
                color: $dangerColor;
            }
        }

        &:hover{
            .right{
                display: flex;
            }
        }
    }
</style>

<style lang="scss">
    .home-nav-search-res-popper{
        width: 220px !important;
    }
</style>